<template>
  <div class="main reset-styles">
    <el-card>
      <div class="list">
        <el-descriptions :title="problemTitle" border :column="4">
          <!-- 第一行：4列 -->
          <el-descriptions-item label="提交">
            <el-icon name="el-icon-data-line"/>
            <span>{{ commitNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="通过">
            <el-icon name="el-icon-circle-check"/>
            <span>{{ passNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="时间">
            <el-icon name="el-icon-time"/>
            <span>{{ time }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="内存">
            <el-icon name="el-icon-memory"/>
            <span>{{ memory }}</span>
          </el-descriptions-item>
          <!-- 第二行：2列 -->
          <el-descriptions-item label="难度" :span="2">
            <el-tag :style="{ backgroundColor: '#f5f5f5', color: difficultyColor }">{{ difficultyText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标签" :span="2">
            <el-tag v-for="tag in tags" :key="tag" style="background-color: #f5f5f5; margin-right: 8px;">
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
          <!-- 第三行：1列，跨4个栏位 -->
          <el-descriptions-item label="操作" :span="4">
            <el-button size="default" type="primary" @click="commit">提交答案</el-button>
            <el-button size="default" type="primary" @click="answer">查看题解</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <div v-html="problemDescription"></div>
      </div>
    </el-card>
  </div>
</template>



<script setup>
import {ref, onMounted, computed} from 'vue';
import axios from 'axios';
import {API_BASE_URL, AUTH_TOKEN} from '@/config.ts';
import {useRoute} from 'vue-router';
import MarkdownIt from 'markdown-it';
import mk from 'markdown-it-katex';
import 'katex/dist/katex.min.css'; // 引入katex样式文件
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import router from "@/router";
const token = localStorage.getItem('token');
// 创建markdown-it实例，配置highlight.js用于代码高亮
const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
            hljs.highlight(str, {language: lang, ignoreIllegals: true}).value +
            '</code></pre>';
      } catch (__) {
      }
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
}).use(mk);

const problemDetails = ref({
  tags: [],
  description: '' // 提供一个空字符串作为默认值
});

const problemDescription = computed(() => {
  // 确保 description 是字符串类型
  return problemDetails.value && typeof problemDetails.value.description === 'string'
      ? md.render(problemDetails.value.description)
      : '';
});

const problemTitle = computed(() => problemDetails.value ? `${problemDetails.value.codeId}.${problemDetails.value.title}` : '');
const difficultyText = computed(() => problemDetails.value ? problemDetails.value.difficultyName : '未知');
const difficultyColor = computed(() => {
  switch (difficultyText.value) {
    case '简单':
      return '#1cb8b8'; // 绿色
    case '中等':
      return '#e6a23c'; // 黄色
    case '困难':
      return '#f56c6c'; // 红色
    default:
      return '#f5f5f5'; // 默认灰色
  }
});
const tags = computed(() => problemDetails.value ? problemDetails.value.tags : []);
const commitNum = computed(() => problemDetails.value ? problemDetails.value.commitNum : '0');
const passNum = computed(() => problemDetails.value ? problemDetails.value.passNum : '0');
const memory = computed(() => problemDetails.value ? problemDetails.value.memoryLimit : '未知');
const time = computed(() => problemDetails.value ? problemDetails.value.timeLimit : '未知');
const route = useRoute();

const loadProblemDetails = async () => {
  const id = route.params.id;
  var api = `${API_BASE_URL}/ProblemsGroup/problems/${id}`;
  try {
    const response = await axios.get(api, {
      headers: {'token': `${AUTH_TOKEN}`}
    });
    problemDetails.value = response.data.data;
    console.log("我看看什么问题：")
    console.log(problemDetails.value);
  } catch (error) {
    console.error('Error loading problem details:', error);
  }
};

const commit =async () => {
  const id = problemDetails.value.id;
  const response = await axios.get(`${API_BASE_URL}/ProblemsGroup/problems/${id}`, {
    headers: {'token': token}
  });
  if (response.data.code === 1) {
    alert("请登录以后提交代码！")
    return;
  }
  await router.push(`/commit/${id}`)
}
const answer =()=>{
  router.push(`/answer/${problemDetails.value.id}`)
}

onMounted(() => {
  loadProblemDetails();
});
</script>


<style scoped>
.reset-styles {
  all: initial;
  /* 重置除了direction和unicode-bidi之外的所有属性 */
  /* 可以添加自定义样式来进一步定义外观 */
}


.list {
  padding-bottom: 20px;
}

.main >>> .el-descriptions__title {
  font-size: 2em; /* 设置为h1的典型大小 */
  font-weight: bold;
}

.main {
  padding-top: 20px;
}

/* 添加自定义样式到引用块 */
::v-deep blockquote {
  background-color: #f9f9f9;  /* 浅灰色背景 */
  border-left: 5px solid #ccc; /* 左侧边框，可以调整颜色 */
  padding: 0.5em 10px; /* 内边距调整 */
  margin: 1em 0; /* 上下外边距 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 添加阴影，与代码块相同 */
}

/* 确保代码块和引用块的文本风格一致 */
::v-deep .hljs, ::v-deep blockquote {
  font-family: 'Courier New', Courier, monospace;
  color: #333; /* 文本颜色调整 */
}

/* 保持代码块的自定义样式 */
::v-deep .hljs {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  overflow-x: auto;
}

::v-deep .hljs code {
  font-size: 0.9em;
}

</style>